<template>
  <div class="rz_bw_nav001_m">
		<div class="nav">
			<div class="nav_main">
				<div class="nav-logo">
					<img src="@/assets/images/logo4.png"  />
				</div>
				<ul id="nav_all">
					<router-link  v-show="item.state==1" v-for="(item,index) in menuLists" :key="index" :to="item.path">
					<li class="menu-list">
						<p>{{item.title}}</p>
						<p>{{item.englisName}}</p>
						<ul v-if="item.hasOwnProperty('cBusinessVOList')">
							<li v-show="child.state==1" class="menu-child" v-for="(child,index) in item.cBusinessVOList" :key="index">
								<router-link :to="item.path+child.id">{{child.title}}	</router-link>
							</li>
						</ul>
					</li>
					</router-link>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import Menu from "@/service/menu-service.js"
	const _menu = new Menu();
	
	export default {
  	name: 'Header',
  	props:{
  		
  	},
  	data :function() {
	    return {
	      menuLists : {}
	    }
  	},
  	components:{
  	
  	},
  	created(){
  		this.menuList();
  	},
  	methods:{
  		menuList(){
  			_menu.menuList({}).then((res)=>{
  				this.menuLists = res.data;
  			},(errMsg)=>{
  				console.log(errMsg)
  			})
  		}
  	}
	}
</script>

<style scoped lang="less">
	.rz_bw_nav001_m {
		clear: both;
		width: 100%;
    height: 90px;
		.nav-logo{
			float: left;
			padding-right:150px;
	    padding-top: 20px;
			img{
				width: 154px;
				height: 50px;
			}
		}
		.nav {
			font-size: 12px;
			width: 1200px;
			margin: 0px auto;
			line-height: 39px;
			position: relative;
			z-index: 1;
			.nav_main {
				padding:0 5px;
				background:#FFF  repeat-x 0 top;
				position:relative;
				#nav_all {
					height:39px;
					float:left;
					line-height:39px;
					position:relative;
					z-index:222;
					.menu-list{
						text-align:center;
						float:left;
						height: 90px;
    				line-height: 70px;
    				padding: 0px 10px;
    				position:relative;
						p{
							color:#333;
							font-size:16px;
							font-weight:bold;
							cursor:pointer;
							padding:0 20px 0 20px;
							height:20px;
							white-space:nowrap;
						}
						&:hover{
							background: #C62E25;
							p{
								color: #fff;
							}
							ul {
								display:block;
							}
						}
						ul{
							display:none;
							position:absolute;
							z-index:99;
							top:90px;
							width: 500px;
					    left: -60px;
			        padding-top: 10px;
			        &:before{
						    position: absolute;
						    content: "";
						    left: 24%;
						    border-left: 8px solid transparent;
						    border-right: 8px solid transparent;
						    border-top: 8px solid #C62E25;
								top: 0px;
							}
							.menu-child{
								float:left;
								line-height:32px;
								height:32px;
								padding-top:0px;
								padding:0;
								width: 90px;
								background: #ffffff;
								a{
									padding:0px 20px;
									margin:0px;
									height:32px;
									line-height:32px;
									color: #333;
									font-weight:normal;
									border-right: 1px solid #dfdfdf;
									&:hover{
										padding:0px 20px;
										margin:0px auto;
										height:30px;
										line-height:30px;
										color:#C62E25;
										border-top:none;
									}
								}
								&:last-child{
									a{
										border-right: 0px;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	
	
</style>